<template>
  <div @scroll="scrollCallback">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "InfiniteScroll",
  emits: ["scroll-to-end"],
  methods: {
    emitUp: () => {
      this.$utils.throttle(
        () => {
          this.emit("scroll-to-end");
        },
        500,
        { leading: true, trailing: false }
      );
    },

    scrollCallback: (e) => {
      e.target.offsetHeight + e.target.scrollTop >= e.target.scrollHeight &&
        this.emitUp();
    },
  },
};
</script>